<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('设备指令详情')}" />
    <!-- 确保jQuery被正确加载 -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        /* JSON显示样式 */
        .json-container {
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            max-height: 500px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        
        .json-key {
            color: #0000FF;
            font-weight: bold;
        }
        
        .json-value {
            color: #A31515;
        }
        
        .json-boolean {
            color: #0000FF;
        }
        
        .json-number {
            color: #098658;
        }
        
        .detail-info {
            margin-bottom: 15px;
        }
        
        .detail-label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            color: #666;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备指令详情</h5>
                </div>
                <div class="ibox-content">
                    
                    <!-- 指令内容（移到最上方优先显示） -->
                    <div style="margin-bottom: 20px;">
                        <span class="detail-label">指令内容：</span>
                        <div id="jsonContent" class="json-container" style="width: 100%;"></div>
                    </div>

                    <!-- 基本信息 -->
                    <div class="detail-info">
                        <span class="detail-label">指令ID：</span>
                        <span th:text="${devDeviceCommand.commandId}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">设备ID：</span>
                        <span th:text="${devDeviceCommand.deviceId}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">指令类型：</span>
                        <span th:text="${devDeviceCommand.commandType}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">指令状态：</span>
                        <span th:text="${#strings.equals(devDeviceCommand.status, 'WAITING') ? '待发送' :
                                           #strings.equals(devDeviceCommand.status, 'SENT') ? '已发送' :
                                           #strings.equals(devDeviceCommand.status, 'COMPLETED') ? '执行成功' :
                                           #strings.equals(devDeviceCommand.status, 'FAILED') ? '执行失败' :
                                           #strings.equals(devDeviceCommand.status, 'TIMEOUT') ? '超时' : devDeviceCommand.status}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">重试次数：</span>
                        <span th:text="${devDeviceCommand.retryCount}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">创建时间：</span>
                        <span th:text="${#dates.format(devDeviceCommand.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">下发时间：</span>
                        <span th:text="${devDeviceCommand.sendTime != null ? #dates.format(devDeviceCommand.sendTime, 'yyyy-MM-dd HH:mm:ss') : '暂无'}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">完成时间：</span>
                        <span th:text="${devDeviceCommand.executeTime != null ? #dates.format(devDeviceCommand.executeTime, 'yyyy-MM-dd HH:mm:ss') : '暂无'}"></span>
                    </div>
                    
                    <div class="detail-info">
                        <span class="detail-label">过期时间：</span>
                        <span th:text="${devDeviceCommand.expireTime != null ? #dates.format(devDeviceCommand.expireTime, 'yyyy-MM-dd HH:mm:ss') : '暂无'}"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 获取指令内容（使用Thymeleaf内联）
        var commandContent = [[${devDeviceCommand.commandContent}]];
        var jsonContentElement = document.getElementById('jsonContent');
        
        // 确保内容不为空
        if (!commandContent || commandContent.trim() === '') {
            jsonContentElement.textContent = '暂无指令内容';
            return;
        }
        
        try {
            // 尝试解析JSON字符串
            var parsedData = JSON.parse(commandContent);
            // 将解析后的数据格式化显示
            formatJson(parsedData);
        } catch (e) {
            // 如果不是有效的JSON，直接显示原始内容并进行HTML转义以防止XSS
            var safeContent = commandContent
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;')
                .replace(/\n/g, '<br>')
                .replace(/  /g, '&nbsp;&nbsp;');
            
            jsonContentElement.innerHTML = safeContent;
        }
    });
    
    /**
     * 格式化JSON数据并显示
     */
    function formatJson(jsonObj) {
        var jsonContentElement = document.getElementById('jsonContent');
        var formattedJson = JSON.stringify(jsonObj, null, 4);
        
        // 对JSON字符串进行语法高亮处理，使用更健壮的正则表达式
        // 首先处理特殊字符，确保HTML安全
        formattedJson = formattedJson
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        
        // 匹配JSON键
        formattedJson = formattedJson.replace(/"([^"\\]*(?:\\.[^"\\]*)*)":/g, '<span class="json-key">"$1":</span>');
        
        // 匹配字符串值
        formattedJson = formattedJson.replace(/:"([^"\\]*(?:\\.[^"\\]*)*)"/g, ':<span class="json-value">"$1"</span>');
        
        // 匹配数字值（包括负数和科学计数法）
        formattedJson = formattedJson.replace(/:(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, ':<span class="json-number">$1</span>');
        
        // 匹配布尔值和null
        formattedJson = formattedJson.replace(/:(true|false|null)/g, ':<span class="json-boolean">$1</span>');
        
        // 处理换行和空格，保留缩进格式
        formattedJson = formattedJson
            .replace(/\n/g, '<br>')
            .replace(/  /g, '&nbsp;&nbsp;');
        
        // 显示处理后的JSON
        jsonContentElement.innerHTML = formattedJson;
    }
    
    /*]]>*/
</script>
</body>
</html>